import { defineConfig, loadEnv, type ConfigEnv } from "vite";
import { resolve } from "path";

import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";

// https://vitejs.dev/config/
export default defineConfig((mode: ConfigEnv) => {
  const env = loadEnv(mode.mode, process.cwd());
  return {
    plugins: [vue(), vueJsx()],
    resolve: {
      alias: {
        "@": resolve(__dirname, "src"),
      },
      extensions: [".ts", ".vue", ".js", ".jsx", ".tsx"], // 导入时想要省略的扩展名列表。
    },
    css: {
      preprocessorOptions: {
        scss: {
          // 引入 var.scss 这样就可以在全局中使用 var.scss中预定义的变量了
          // 给导入的路径最后加上 ;
          additionalData: '@import "./src/styles/variables.scss";',
        },
      },
      postcss: {
        plugins: [
          {
            postcssPlugin: "internal:charset-removal",
            AtRule: {
              charset: (atRule) => {
                if (atRule.name === "charset") {
                  atRule.remove();
                }
              },
            },
          },
        ],
      },
    },

    // 跨域代理
    server: {
      // port: 8080,
      // open: true,
      proxy: {
        // key 当前 vite 接收到的请求的 path
        // http://localhost:3001/login => 发给当前 Vue
        // http://localhost:3001/admin/acl/index/login => 发给目标api服务器
        // 如果接收到的请求的url中path部分是以 /admin 开头，则进行转发，否则你自己处理
        "/admin": {
          // 转发的目标服务器地址（主机域名），这里只填写主机域名，原请求的路径部分自动和 target 进行拼接，生成目标地址
          // http://localhost:3001/admin/acl/index/login
          // http://gmall-h5-api.atguigu.cn/admin/acl/index/login
          target: "http://gmall-h5-api.atguigu.cn",
          // 改变代理请求头的origin原信息的值
          changeOrigin: true,
          // 如果修改了target后，目标的地址已经符合服务器api的真实地址了，也就必要去重写路径部分了，如果不一致呢？
          // http://localhost:3001/admin/api/acl/index/login
          // http://gmall-h5-api.atguigu.cn/admin/api/acl/index/login
          // 而真实的api地址：http://gmall-h5-api.atguigu.cn/admin/acl/index/login
          // 所以我们需要重写路径部分，把 /api给去掉
          // webpack(vue-cli) 使用的是 pathRewrite
          // vite 使用的是 rewrite
          rewrite(path) {
            // path: /admin/api/acl/index/login

            // return 的值是 最后拼接在 target 后面的内容
            // /admin/acl/index/login
            // http://gmall-h5-api.atguigu.cn/admin/acl/index/login
            return path.replace("/api", "");
          },
        },
      },
    },
  };
});
